<template>
  <view class="splash-container">
    <image src="/static/bg.png" mode="aspectFill" class="background-image"></image>
    <view class="skip-button" @click="skipSplash">
      跳过({{countdown}}s)
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        countdown: 5,
        timer: null
      };
    },
    onLoad() {
      // 启动5秒倒计时
      this.startCountdown();
    },
    onUnload() {
    
      if (this.timer) {
        clearInterval(this.timer);
      }
    },
    methods: {
      startCountdown() {
        this.timer = setInterval(() => {
          this.countdown--;
          if (this.countdown <= 0) {
            clearInterval(this.timer);
            this.navigateToNextPage();
          }
        }, 1000);
      },
      
      skipSplash() {
        if (this.timer) {
          clearInterval(this.timer);
        }
        this.navigateToNextPage();
      },
      
      navigateToNextPage() {
        console.log('5秒倒计时结束，跳转到认证页面');
        uni.navigateTo({
          url: '/pages/login/login'
        });
      }
    }
  };
</script>

<style scoped>
  .splash-container {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
  }
  
  .background-image {
    width: 100%;
    height: 732.46px;
  }
  
  .skip-button {
    position: absolute;
    top: 40rpx;
    right: 40rpx;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    padding: 15rpx 30rpx;
    border-radius: 40rpx;
    font-size: 24rpx;
  }
</style>